<!DOCTYPE html>
<html>
    <head>
        <title>Learn</title>
        <style type="text/css">
            #one{
                position: realtive;
                height:25px;
                width:150px;
                border:2px solid black;
                background-color: #FF9935;
                box-shadow: solid black 1px 1px 1px 1px;
                margin-left: 50 px;
                marigin-top:100px;
                transition: width 4s;
            }
            #one:hover{
                width:800px;
            }
            #two{
                position: relative;
                margin-top: 2px;
                height:25px;
                width:150px;
                border:2px solid black;
                background-color: #ffffff;
                box-shadow: solid black 1px 1px 1px 1px;
                margin-left: 50 px;
                transition: width 4s;
            }
            #two:hover{

                width: 800px;

            }
            #three{
                position: relative;
                margin-top: 2px;
                height:25px;
                width:150px;
                border:2px solid black;
                background-color: #40B020;
                box-shadow:  1px 1px 1px 1px solid black;
                margin-left: 50 px;
                transition: height 5s;
                color:white;

            }
            #three:hover{
                height: 500px;

            }
        </style>



    </head>
    <body>
        <div id="one"></div>
        <div id="two"></div>
        <div id="three" >
            <h6> HOME </h6> <br>
            <h6> HOME </h6> <br>
            <h6> HOME </h6> <br>
            <h6> HOME </h6> <br>
            <h6> HOME </h6> 

        </div>

    </body>
</html>
